import React, { useContext, useState } from 'react';
import classNames from 'classnames';
import { MenuContext } from './Menu';
import { MenuItemProps } from './MenuItem';
import { Icon } from '../Icon/Icon';

import { Transition } from '../Transition'
// import Transition from "../Transition/transition";

export interface SubMenuProps {
    index ?: string;
    title : string;
    className ?: string;
}

export const SubMenu: React.FC<SubMenuProps> = ({ index, title, children, className}) =>{
    const context = useContext(MenuContext)
    const openedSubMenus = context.defaultOpenSubMenus as Array<string>
    const isOpened = (index && context.mode === 'vertical'
        && openedSubMenus.includes(index)) as boolean
    const [menuOpen, setOpen] = useState(isOpened)
    const classes = classNames("wave-menu-item wave-submenu-item", className, {
        "wave-is-active": context.index === index,
        'wave-is-opened': menuOpen,
        'wave-is-vertical': context.mode === 'vertical'
    })
    
    let timer:any
    const handleMouse = ( e: React.MouseEvent, toggle: boolean)=>{
        clearTimeout(timer)
        e.preventDefault()
        timer = setTimeout(()=>{
            setOpen(toggle)
        }, 300)
    }
    const handleClick = (e: React.MouseEvent) => {
        e.preventDefault()
        setOpen(!menuOpen)
    }
    const clickEvents = context.mode === "vertical" ?{
        onClick: handleClick
    } :{}
    const hoverEvents = context.mode !== "vertical" ? {
        onMouseEnter: (e: React.MouseEvent) => { handleMouse(e, true)},
        onMouseLeave: (e: React.MouseEvent) => { handleMouse(e, false)}
    } : {}
    const renderChildren = () => {
        const subMenuClasses = classNames("wave-submenu", {
            "wave-menu-opened": menuOpen
        })
        const childrenComponent = React.Children.map(children, (child, i) => {
            const childElement = child as React.FunctionComponentElement<MenuItemProps>
            if (childElement.type.displayName === "MenuItem") {
                return React.cloneElement(childElement, {
                    index: `${index}-${i}`
                })
            } else {
                console.error("warning: submenu has a child which is not a MenuItem")
            }

        })
        return (
            // <ul className={subMenuClasses}>
            //     {childrenComponent}
            // </ul>      

            // <CSSTransition 
            //     in={menuOpen as boolean} 
            //     timeout={300} 
            //     classNames="zoom-in-top"
            //     // 初次加载时也有动画
            //     appear
            //     // 进入时挂载, 离开时卸载
            //     unmountOnExit={true}
            // >
            //     <ul className={subMenuClasses}>
            //         {childrenComponent}
            //     </ul>
            // </CSSTransition>
            <Transition 
                in={menuOpen}
                timeout={300}
                animation="zoom-in-bottom"
            >
                <ul className={subMenuClasses}>
                    {childrenComponent}
                </ul>     
            </Transition>
        )
    }
    
    return (
        <li key={index} className={classes} {...hoverEvents}>
            <div className='wave-submenu-title' {...clickEvents}>
                {title}
                <Icon icon="arrow-down" className="wave-arrow-icon" />
            </div>
            {
                renderChildren()
            }
        </li>
    )
}

SubMenu.displayName = "SubMenu"
